<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="net.groupme.gui.constants.VIEW_VOCABULARY"%>
<%@page import="net.groupme.controller.ExportController"%>
<%@page import="net.groupme.gui.rendering.constants.RENDERING_CONSTANTS"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- meta tags, link to css:  -->
	<%@ include file="./jsp-includes/metaheader.jsp" %>
	
	

	<title><c:out value="${groupManager.group.name}"/> [GroupBuilder] - GroupMe!</title>
	
	<!--  Ajax Scripts -->
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRSearchManager.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRGroupManager.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRUserManager.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRResourceAggregation.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRSearchResultRenderer.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRResourceRenderer.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRGroupBrowsingManager.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/engine.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/util.js'> </script>
	<script src="<%= request.getContextPath()%>/scriptaculous/prototype.js" type="text/javascript"></script>
	<script src="<%= request.getContextPath()%>/scriptaculous/scriptaculous.js" type="text/javascript"></script>

	<%@ include file="./jsp-includes/groupResourceLoadingRendering.jsp" %>
	<%@ include file="./jsp-includes/resourceResizingMoving.jsp" %>
	<script type="text/javascript" language="javascript"><!--
	//<![CDATA[//>
		
		/** BEGIN SEARCH STUFF 
		 * This is a bit tricky because Draggables are buggy when creating them within a loop.
		 * General sequence:
		 * 1. user clicks on search
		 * 2. searchForResources() is called which calls our ResourceAggregationAjaxController
		 * 3. SearchResult-Array is passed to searchForResourcesFinished(..)
		 * 4. searchForResourcesFinished(..) requests DWRSearchResultVisualizer for an adequate Html-Formatting of each SearchResult
		 * 5. visualize() is called on callback, sets the resulting HTML-content and creates a Draggable out of the div-Element which renders a SearchResult
		 */
		
		/** temporal store for created draggable SearchResult items */
		var searchResultDraggables = new Array(); 
		
		/** temporal store deactivated elements for SearchResult items that are faded out and thus deactivated */
		var deactivatedSearchResult = new Array();
		
		/** temporal store for ResourceDivID */
		var resourceID = "";
		
		/** the current draggable onject */
		var drag;
		
   		/** Renaming functions */
   		var groupNameField;
   		var newGroupName;
	  	function showGroupTextfield(){
	  		groupNameField = dwr.util.byId("groupNameField").innerHTML;
	  		$("groupNameField").update('');
	  		dwr.util.byId("groupNameField").innerHTML = "<input ID=\"groupNameTextfield\" type=\"text\" size=\"60\" name=\"Group name\" value=\"" + groupNameField + "\"/>";
	  		toggleRename1();
	  	}
	  	/**
   		* Toggles the visibility of the Group-RenameButtons
   		* @param ID of the ResourceVisualization
   		*/
   		function toggleRename1(){ 
   			$('groupRenameButton').setStyle({display:'none'});
   			$('groupSaveRenameButton').setStyle({display:'inline'});
		} 
		function toggleRename2(){ 
			$('groupRenameButton').setStyle({display:'inline'});
   			$('groupSaveRenameButton').setStyle({display:'none'});
		} 
		function saveNewGroupName(groupID){
	  		newGroupName = dwr.util.byId("groupNameTextfield").value;
	  		dwr.util.byId("groupNameField").innerHTML = newGroupName;
	  		DWRUserManager.renameGroup(groupID, newGroupName);
	  		toggleRename2();
	  	}
	  	/** Description editing functions */
	  	var groupDescriptionField;
   		var newGroupDescription;
	  	function editGroupDescription(){
	  		groupDescriptionField = dwr.util.byId("groupDescriptionField").innerHTML;
	  		$("groupDescriptionField").update('');
	  		dwr.util.byId("groupDescriptionField").innerHTML = "<input ID=\"groupDescriptionTextfield\" type=\"text\" size=\"60\" name=\"Group description\" value=\"" + groupDescriptionField + "\"/>";
	  		toggleEditDescription1();
	  	}
	  	/**
   		* Toggles the visibility of the Group-RenameButtons
   		* @param ID of the ResourceVisualization
   		*/
   		function toggleEditDescription1(){ 
   			$('editDescriptionButton').setStyle({display:'none'});
   			$('groupSaveDescriptionButton').setStyle({display:'inline'});
		} 
		function toggleEditDescription2(){ 
			$('editDescriptionButton').setStyle({display:'inline'});
   			$('groupSaveDescriptionButton').setStyle({display:'none'});
		} 
		function saveNewGroupDescription(groupID){
	  		newGroupDescription = dwr.util.byId("groupDescriptionTextfield").value;
	  		dwr.util.byId("groupDescriptionField").innerHTML = newGroupDescription;
	  		DWRUserManager.editGroupDescription(groupID, newGroupDescription);
	  		toggleEditDescription2();
	  	}	
		 /** 
	    * Callback function which is executed after looking up Groups of the Users.
	    * Formatting the Groups and adding it to the page.
	    * @param an Array of GroupBeans whick represent the Groups of the current User.
	    */
	   	function selectGroups(userGroupList){
	   		if(userGroupList == null || !(userGroupList.length > 0)){
				dwr.util.byId("selectGroup").innerHTML = "<p><i>No Groups found.</i></p>";
			}else{
				var html = "<form name=\"switchgroup\" action=\"<%= VIEW_VOCABULARY.ACTION_SHOW_GROUP %>\" method=\"post\"><select name=\"<%= VIEW_VOCABULARY.PARAMETER_ID %>\">";
					for(var i=0; i<userGroupList.size(); i++){
						html = html.concat("<option value=\"" + userGroupList[i].id +"\">" + userGroupList[i].name + "</option>");
					}
					html = html.concat("</select><input type=\"submit\" value=\"switch\" title=\"Switch GroupMe! Group\"/>");
					html = html.concat("</form>");
					dwr.util.byId("selectGroup").innerHTML = html;
			}
	  	}
		
		/**
		 * Searching for new Resources. This method is called, whenever clicks on the search-Button.
		 * This method then passes the entered keyword and the search-engine-selection to the general
		 * Search Engine Ajax Controller
		 */ 
		function searchForResources(){
			dwr.util.byId("resultPageView").innerHTML = "";
			$('searchresults1').show();
			$('searchresults2').hide();
			$('searchresults3').hide();
			$('searchresults4').hide();
			$('searchresults5').hide();
			$('searchresults6').hide();
			$('searchresults7').hide();
			$('searchresults8').hide();
			$('searchresults9').hide();
			$('searchresults10').hide();
			dwr.util.byId("searchresults1").innerHTML = "";
			dwr.util.byId("searchresults2").innerHTML = "";
			dwr.util.byId("searchresults3").innerHTML = "";
			dwr.util.byId("searchresults4").innerHTML = "";
			dwr.util.byId("searchresults5").innerHTML = "";
			dwr.util.byId("searchresults6").innerHTML = "";
			dwr.util.byId("searchresults7").innerHTML = "";
			dwr.util.byId("searchresults8").innerHTML = "";
			dwr.util.byId("searchresults9").innerHTML = "";
			dwr.util.byId("searchresults10").innerHTML = "";
			//clean arrays and effects
			for(var i=0; i<deactivatedSearchResult.size(); i++){
		   		deactivatedSearchResult[i].setOpacity(1.0);
		   	}
		   	deactivatedSearchResult.clear();
		   	for(var i=0; i<searchResultDraggables.size(); i++){
		   		searchResultDraggables[i].destroy();
		   	}
		   	searchResultDraggables.clear();
		   	
		   	dwr.util.byId("searchresults1").innerHTML = "<img src='<%= request.getContextPath() + RENDERING_CONSTANTS.RELATIVE_PATH_OF_AJAX_LOADING_IMAGE %>'/>";
			
			var keywords = dwr.util.getValue("searchinput");
			var searchSrc = dwr.util.getValue("searchSource");
			var description = dwr.util.getValue("descriptioninput").replace(/\n/g,"<br>");
		    var	titel = dwr.util.getValue("titelinput");
			var	urlinput = dwr.util.getValue("urlinput");
			var rssinput = dwr.util.getValue("rssinput");
			if(searchSrc == "addbyurl"){
		   		DWRResourceAggregation.addResourceManual(urlinput, titel, description, searchForResourcesFinished);
		   	}
		   	else if (searchSrc == "addrss"){
		   		DWRResourceAggregation.addRssManual(rssinput, searchForResourcesFinished)
		   	}
		   	else{
		   		DWRResourceAggregation.searchForResources(keywords, searchSrc, searchForResourcesFinished);
		   	}
		
		}
		
		/**
		 * Callback function which is executed after search for resources. This method
		 * has to initiate the visualization of each search result item.
		 * @param searchResults an Array containing SearchResult instances
		 */
		var resultPages;
		var actualPage;
		function searchForResourcesFinished(searchResults){
			dwr.util.byId("searchresults1").innerHTML = "";
			dwr.util.byId("resultPageView").innerHTML = "";
			if(searchResults == null || !(searchResults.length > 0)){
				dwr.util.byId("searchresults1").innerHTML = "<p><i>No results! Please try again.</i></p>";
			}else{
				for(resultPages=0; resultPages<=(searchResults.size()/4.1); resultPages++){
					for (i=4*resultPages; (i<(4*resultPages)+4 && i<searchResults.size()); i++){
						var actualID = searchResults[i].resultID;
						pageId = resultPages+1;
						dwr.util.byId("searchresults" + pageId).innerHTML += "<div id='" + actualID + "' class='searchResult' style='position:relative;'></div>";
						DWRSearchResultRenderer.getVisualization(actualID, searchResults[i], visualize);
					}
				}
				actualPage = 1;
				if (resultPages>1){
					dwr.util.byId("resultPageView").innerHTML += "previous 1 ";
					for(k=2; k<=resultPages; k++){
						dwr.util.byId("resultPageView").innerHTML += "<a href='javascript:changeToResultPage(" + k + ")'>" + k + "</a> ";
					}
					dwr.util.byId("resultPageView").innerHTML += "<a href='javascript:changeToResultPage(2)'>next</a>";
				}
			}
		}

		function changeToResultPage(pageNo){
			dwr.util.byId("resultPageView").innerHTML = "";
			if(pageNo > 1){
				dwr.util.byId("resultPageView").innerHTML += "<a href='javascript:changeToResultPage(" + (pageNo-1) + ")'>previous</a> ";
			}
			else{
				dwr.util.byId("resultPageView").innerHTML += "previous ";
			}
			for(l=1; l<=resultPages; l++){
				if(l==pageNo){
					dwr.util.byId("resultPageView").innerHTML += l + " ";
					new Effect.BlindDown('searchresults' + l);
				}
				else{
					dwr.util.byId("resultPageView").innerHTML += "<a href='javascript:changeToResultPage(" + l + ")'>" + l + "</a> ";					
					new Effect.BlindUp('searchresults' + l);
				}			
			}
			if(pageNo < resultPages){
				dwr.util.byId("resultPageView").innerHTML += "<a href='javascript:changeToResultPage(" + (pageNo+1) + ")'>next</a>";
			}
			else{
				dwr.util.byId("resultPageView").innerHTML += "next";
			}
		}
		
		function switchResultPageUp(){
			if (actualPage == resultPages){
				newPage = 1;
				}
			else {
				newPage = actualPage+1;
			}
			new Effect.BlindUp('searchresults' + actualPage);
			new Effect.BlindDown('searchresults' + newPage);
			actualPage = newPage;
		}
		
		/**
		 * Callback function of DWRSearchResultVisualizer.getVisualization(). It simply
		 * sets the content of the SearchResult-div-element and then crates a Draggable out of the 
		 * div-Element
		 * @param htmlContent the HTML formatted content of the div tag
		 */
		function visualize(htmlContent){
			dwr.util.byId(htmlContent.divID).innerHTML = htmlContent.html;
			var draggableItem = new Draggable(htmlContent.divID , {revert:true});
			searchResultDraggables.push(draggableItem);
		}
		/**
		 * SearchReasults that have been dropped into the GroupArea should loose their
		 * draggable behavior so that they cannot be dragged twice.
		 */
		function deactivateDraggable(element){
			for(var i=0; i<searchResultDraggables.size(); i++){
		   		if(searchResultDraggables[i].handle.id == element.id){
		   			searchResultDraggables[i].destroy();
					return;
		   		}
		   	}
		}
		
		/**
		 * This method is invoked whenever an item/element is dropped into the Group area
		 * which happens if (a) a new SearchResult is added to the group (element.class = searchResult)
		 * and (b) if resources are moved within the Group area 
		 *
		 * @param element the element that is dragged into the area
		 * @param dropon the element on which the item is dropped (thus this should be the Group area)
		 * @param event the corresponding mouse event
		 */
   		function itemDropped(element, dropon, event) {
	   		if(Element.hasClassName(element.id, 'searchResult')){
	   			var layer = null;  
   				layer = dwr.util.byId(element.id);  
		   		DWRGroupManager.addSearchResultToGroup(element.id, layer.offsetLeft - $('group').offsetLeft, layer.offsetTop - $('group').offsetTop, layer.offsetWidth, layer.offsetHeight, zAxisIndicator+1, $('group').offsetWidth, $('group').offsetHeight, reloadGroup);
		   		deactivateDraggable(element);
		   		var opacity = new Effect.Opacity(element, {duration:1.0, from:1.0, to:0.3, delay: 1.2});
		   		deactivatedSearchResult.push(element);
	   		}
   		}
   		
   		function reloadGroup(dummy){
   			DWRGroupManager.loadResources($('group').offsetWidth, $('group').offsetHeight, loadResourcesIntoGroup);
   		}
   		
   		/**
   		* Toggels the menu in which ressources can be manually added on
   		*/
   		function toggleManualMenu(){
   			$("manadd").show();
   			dwr.util.byId("submitSearchButton").value = "add";
   			$("keywordInputField").hide();
   		}
   		
   		/**
   		* Toggels the menu in which ressources can be manually added on
   		*/
   		function toggleManualMenuOff(){
   		    dwr.util.byId("submitSearchButton").value = "search";
   		    $("keywordInputField").show();
   			$("manadd").hide();
   			$("rssInputField").hide();
   		}
   		
   		/**
   		* Toggels the menu in which RSS Streams can be manually added on
   		*/
   		function toggleManualRSS(){
   			$("manadd").hide();
   			$("keywordInputField").hide();
			dwr.util.byId("submitSearchButton").value = "add"
   			$("rssInputField").show();
   		}
   		
   		/**
   		* Checks if the value of the dropdown Box has changed and calls the functions to hide or show the coresponding elements
   		* (nessesary for IE compatibility)
   		*/
   		
   		function CheckAuswahl() {
          toggleManualMenuOff();
          for(var i=0; i<deactivatedSearchResult.size(); i++){
		   		deactivatedSearchResult[i].setOpacity(1.0);
		   	}
		   	deactivatedSearchResult.clear();
		   	for(var i=0; i<searchResultDraggables.size(); i++){
		   		searchResultDraggables[i].destroy();
		   	}
		   	searchResultDraggables.clear();
		   	dwr.util.byId("searchresults1").innerHTML = "";
			dwr.util.byId("searchresults2").innerHTML = "";
			dwr.util.byId("searchresults3").innerHTML = "";
			dwr.util.byId("searchresults4").innerHTML = "";
			dwr.util.byId("searchresults5").innerHTML = "";
			dwr.util.byId("searchresults6").innerHTML = "";
			dwr.util.byId("searchresults7").innerHTML = "";
			dwr.util.byId("searchresults8").innerHTML = "";
			dwr.util.byId("searchresults9").innerHTML = "";
			dwr.util.byId("searchresults10").innerHTML = "";
			dwr.util.byId("resultPageView").innerHTML = "";
         
         	if (document.searchChooser.searchSource.options[4].selected == true){
         		toggleManualMenu();
         	} 
         	if (document.searchChooser.searchSource.options[5].selected == true){
         		toggleManualRSS();
         	}
		}
   		
   		/**
   		* Toggles the visibility of Tags of a ResourceVisualization
   		* @param ID of the ResourceVisualization
   		*/
   		function toggleTags(element){ 
			if($(element + "_tags").getStyle('display') == 'none') {
				$(element + "_tags").setStyle({display:'block'}); 
				showTags(element);
				}
			else $(element + "_tags").setStyle({display:'none'});
		}
   		
   		/**
   		* Called by the ResourceVisualizationMenu to show the Tags.
   		* @param the DivID of the calling ResourceVisualizatoin
   		*/
   		function showTags(divID){
   			resourceID = divID + "_tags";
   			DWRGroupManager.loadTagsForResource(divID, loadTags);
   		}
   		
   		/**
   		* Callback function for showTags.
 		* @param array of all Tags for this Resource
   		*/
   		function loadTags(tagsArray){
			dwr.util.byId(resourceID).innerHTML = createTagString(tagsArray);
   		}
   		
   		/**
   		* Called by the ResourceVisualizationMenu to add a Tag to the Resource.
   		* @param the ID of the Resource the Tag should be added to
   		*/
   		function addTag(resourceID, tmpResVisuDivID){
   			resVisuDivID = tmpResVisuDivID;
   			key = prompt("Please enter a keyword for the Resource:", "keyword");
   			if (key!=null){
   				DWRGroupManager.addTagToResource(key, resourceID, reloadTags);
   			}
   		}
   		
   		/**
   		* Callback function after adding a Tag to a Resource. Repaints the Tags.
   		* @param a boolean which indicates if addTag was successful.
   		*/
   		function reloadTags(success){
   			if (success == true) {
   				showTags(resVisuDivID);
   				reloadTagCloud();
   			}
   			else {
   				alert('Error while creating Tag.');
   			}
   		}
   		
   		/**
   		* Called by the group menu to add a Tag to the actual group.
   		*/
   		function addTagToGroup(){
   			key = prompt("Please enter a keyword for the Group:", "keyword");
   			if (key!=null){
   				DWRGroupManager.addTagToActualGroup(key, reloadGroupTags);
   			}
   		}
   		
   		/**
   		* Called by the group menu to add a Thumbnail to the actual group.
   		*/
   		function addThumbnailToGroup(){
   			key = prompt("Please enter the URL for the Thumbnail:", "keyword");
   			if (key!=null){
   				DWRGroupManager.addThumbnailToActualGroup(key, reloadGroupTags);
   			}
   		}
   		
   		/**
   		* Callback function after adding a Tag to a Group. Repaints the Tags.
   		* @param a boolean which indicates if tag was added successfully.
   		*/
   		function reloadGroupTags(success){
   			if (success == true) {
   				//the parameter of this method indicates wheather to search for all tags (true) or only for tags 
   				//that were made by the user (false)
   				DWRGroupManager.loadTagsForGroup(true, showGroupTags);
   				reloadTagCloud();
   			}
   			else {
   				alert('Error while creating Tag.');
   			}
   		}
   		
   		/**
   		* Callback function for reloadGroupTags.
 		* @param tagsArray array of all Tags for this Resource as HtmlFormattedElements
   		*/
   		function showGroupTags(tagsArray){
   			dwr.util.byId("groupTags").innerHTML = createTagString(tagsArray);
   		}
   		
   		/**
   		 * Small helper function that formats the given (Html-formatted) Tags
   		 * @param tagsArray array of all Tags for this Resource as HtmlFormattedElements
   		 */
   		function createTagString(tagsArray){
	   		if(tagsArray == null || !(tagsArray.length > 0)){
	   			return "<i>No Tags found.</i>";
	   		}
   			var tagString = "";
			for(var i=0; i<tagsArray.size(); i++){
				tagString = tagString.concat(tagsArray[i].html);
				if(((i + 1) < tagsArray.size()) && (tagsArray.size() > 1)){
					tagString = tagString.concat(", ");
				}
			}
			return tagString;
		}
   		
   		/**
   		* Finds and saves the position and the size of a ResourceVisualization.
   		* @param elementID the ID of the ResourceVisualitation to save
   		*/
   		function saveResourcePos(elementID, contentID){  
   			var layer = null;  
   			var content = null;
   			layer = dwr.util.byId(elementID);  
   			content = dwr.util.byId(contentID);  
   			updateResourceVisualizationsProperties(contentID, layer.offsetLeft, layer.offsetTop, layer.offsetWidth, layer.offsetHeight, $(layer).getStyle('zIndex') ,$('group').offsetWidth, $('group').offsetHeight);
   		}
   		
   		/**
   		* Updates the position and size of a ResourceVisualization by calling the GroupManager.
   		* @param resVisuID the ID of the ResourceVisualization to save
   		* @param posX the X-position of the ResourceVisualization to save
   		* @param posY the Y-position of the ResourceVisualization to save
   		* @param resWidth the width of the ResourceVisualization to save
   		* @param groupWidth the width of the current group
   		*/
   		function updateResourceVisualizationsProperties(resVisuID, posX, posY, resWidth, resHeight, zAxis, groupWidth, groupHeight){
   			DWRGroupManager.updateResourceVisualization(resVisuID, posX, posY, resWidth, resHeight, zAxis, groupWidth, groupHeight);
   		}
   		
   		var tmpResVisuID;
   		/**
   		* Removes a ResourceVisualization from the GroupVisulization.
   		* @param the ID of the ResourceVisualization to remove.
   		*/
   		function removeResourceFromGroup(resVisuID){
   		tmpResVisuID = resVisuID;
   		DWRGroupManager.getResourceName(resVisuID, removeResourceFromGroupCallback);
   		}
   		
   		function removeResourceFromGroupCallback(resVisuName){
   			removeCheck = confirm("Do you really want to remove Resource: " + resVisuName + " from Group: ${groupManager.group.name}?");
   			if (removeCheck == false) return;
   			$('group').removeChild(dwr.util.byId(tmpResVisuID + "_border"));
   			DWRGroupManager.removeResourceFromGroup(tmpResVisuID);
   		}
		
		/** Big Resource View Stuff */
		/**
		* Shows the ResourceVisualization with the given ID big in the Center.
		* @param resourceID the ID of the Resource to show.
		*/
		function showBigResource(resourceID) {
		resourceID2 = resourceID;
			if (self.innerHeight) // all except Explorer
			{
				innerx = self.innerWidth;
				innery = self.innerHeight;
			}
			else if (document.documentElement && document.documentElement.clientHeight)
				// Explorer 6 Strict Mode
			{
				innerx = document.documentElement.clientWidth;
				innery = document.documentElement.clientHeight;
			}
			else if (document.body) // other Explorers
			{
				innerx = document.body.clientWidth;
				innery = document.body.clientHeight;
			}
			
			$("bigResourceScreen").setStyle({width:innerx + "px"});
			$("bigResourceScreen").setStyle({height:innery + "px"});
			DWRGroupManager.getBigResourceVisualization(resourceID, innerx, innery, showBigResourceCallback);
			
			
		}
		
		function showBigResourceCallback(bigResourceHTML) {
			$("bigResource").innerHTML = bigResourceHTML;
			$("bigResourceScreen").setStyle({display:'block'});
			$("bigResource").setStyle({display:'block'});
			new Effect.Opacity("bigResourceScreen", {duration:1.0, from:0.8, to:0.8, delay: 0.1});
		}
		/**
		* Closes the "Big-View" Screen.
		*/
		function closeBigResource(){
			new Effect.SwitchOff("bigResourceScreen");
			new Effect.SwitchOff("bigResource");
			dwr.util.byId("bigResource").innerHTML = "";
		}
		
		var BRVContent;
		var BRVViewIndicator;
		/**
		* Switches the BigResourceView between details and normal view.
		* @param resourceId the Id of the current Resource
		* @param resVisuURI the URI of the ResourceVisualization
		*/
		function showDetailView(resourceId, resVisuURI){
			if (BRVViewIndicator == 0){
				BRVViewIndicator = 1;
				BRVContent = $('mainBRV').innerHTML;
				$('detailButton').update('back');
				DWRGroupManager.getResourceDetailsView(resourceId, resVisuURI, showDetailViewCallback);
			}
			else {
				BRVViewIndicator = 0;
				$('detailButton').update('details');
				$('mainBRV').innerHTML = BRVContent;
			}
		}
		
		/**
		* The Callback function for showDetailView, sets the detail content of BRV
		* @param htmlString the detailview as HTML
		*/
		function showDetailViewCallback(htmlString){
			$('mainBRV').innerHTML = htmlString;
		}
		
		/**
		* This method is for showing the similar groups for the current vied group.
		*/
		function getSimilarGroups(){
			DWRGroupManager.getSimilarGroups(getSimilarGroupsCallback);
		}
		
		/**
		* The Callback function for getSimilarGroups, sets the similar groups.
		* @param array of HTMLFormattedElements, representing the similar groups.
		*/
		function getSimilarGroupsCallback(similars){
			var tmpHTML = "Similar Groups: <br/>";
			for(var i=0; i<similars.size(); i++){
				tmpHTML += similars[i].html;
			}
			$('similarGroups').innerHTML = tmpHTML;
		}
		
		/**
		 * Reload tag cloud of group.
		 */
		 function reloadTagCloud(){
		 	DWRSearchManager.getGroupTagCloudByURI("<c:out value='${groupManager.group.URI}'/>", showTagCloud);
			$('tagcloud').innerHTML += "<img src=\"<%= request.getContextPath() + RENDERING_CONSTANTS.RELATIVE_PATH_OF_AJAX_LOADING_IMAGE %>\"/> " +
						"<small><i>refreshing tag cloud</i></small>";
	 	}
	 	
		/**
		 * Visualize tag cloud of group.
		 */
		 function showTagCloud(tagCloud){
		 	if(tagCloud == null || tagCloud.html == ""){
		 		$('tagcloud').innerHTML = "<i>Neither the group nor its resources are tagged!</i>";
		 	}else{
		 		$('tagcloud').innerHTML = "<strong>Tag Cloud:</strong>" + tagCloud.html;
	 		}
	 	}
	 
		//init stuff:		
		function init() {
		  BRVViewIndicator = 0;
		  mousedown =0;
		  idOfResizedResource = 0;
		  zAxisIndicator = 5;
		  DWRUtil.useLoadingMessage();
		  DWRGroupManager.loadResources($('group').offsetWidth, $('group').offsetHeight, loadResourcesIntoGroup);
		  reloadGroupTags(true);
		  getSimilarGroups();
		  reloadTagCloud();	  
		}
	//<!]]>
	--></script>
</head>
<body onload="init()" onmousemove="resize2(event);" onmouseup="resize3();">
	<!-- title image, logo:  -->
	<div id="header">
		<%@ include file="./jsp-includes/titleheader.jsp" %>
	</div>
	
	<!-- Menu: -->
	<div id="menu">
		<%@ include file="./jsp-includes/menu.jsp" %>
	</div>
	<!-- content and sidebar -->
	<div id="main">
		<!-- Search Sidebar (aggregating new resources into GroupMe!) -->
		<div id="sidebar">
			<form action="javascript:searchForResources()" name="searchChooser">
			<strong>Search for resources:</strong><br />
			search at: 	<select name="searchSource" onchange="CheckAuswahl()">
       						<option value="flickr" selected="selected" >Flickr</option>
					       	<option value="google" >Google</option>
					       	<option value="groupmegroups" >GroupMe! groups</option>
					       	<option value="groupmeresources" >GroupMe! resources</option>
					       	<option value="addbyurl">Add Resorce by URL</option>
					       	<option value="addrss">Add RSS by URL</option>
  						</select> <br/>
			<span id="keywordInputField">keyword: <input type="text" id="searchinput" maxlength="255" /> </span>
			<span id="rssInputField" style="display:none">URL of RSS-Feed: <input type="text" id="rssinput" maxlength="255" /> </span>
				<br/><span id="manadd" style="margin-top:5px;display:none">
				<strong><i>Add manually:</i></strong><br/>
					url:<br/>	 <input type="text" id="urlinput" maxlength="255"/> <br/>
					titel:	<br/> <input type="text" id="titelinput" maxlength="255"/> <br/>
					description: <br/> <textarea cols="20" rows="2" id="descriptioninput"></textarea>			
				</span>
			<input id="submitSearchButton" type="submit" value="search" onclick="searchForResources()"/>
			</form>
			<br/>
			Results:
			<div id="resultPageView" style="font-size:0.7em">
			</div>
			<div id="searchresults1" style="display:block;">
			</div>
			<div id="searchresults2" style="display:none;">
			</div>
			<div id="searchresults3" style="display:none;">
			</div>
			<div id="searchresults4" style="display:none;">
			</div>
			<div id="searchresults5" style="display:none;">
			</div>
			<div id="searchresults6" style="display:none;">
			</div>
			<div id="searchresults7" style="display:none;">
			</div>
			<div id="searchresults8" style="display:none;">
			</div>
			<div id="searchresults9" style="display:none;">
			</div>
			<div id="searchresults10" style="display:none;">
			</div>
		</div>
		<!-- Content: -->
		<div id="content">
			<div id="upperRight" style="text-align:right; float:right">
	  			<div id="selectGroup">
					<script>
						DWRUserManager.getUsersGrouplist(selectGroups);
					</script>
				</div>
				<div id="similarGroups" style="font-size:0.8em;">

				</div>
			</div>
			<table style="vertical-align:top;">	
				<tr> <td>									 <strong> <span id="groupNameField" style="font-size:200%"><c:out value="${groupManager.group.name}"/></span> </strong>
															<a id="groupRenameButton" style="font-size: 0.6em;" href="javascript:showGroupTextfield()" title="Rename GroupMe! Group">edit</a>
															<input id="groupSaveRenameButton" type="button" style="display:none; width:4em;" value="save" onclick="saveNewGroupName(<c:out value="${groupManager.group.id}"/>)" title="Save new GroupMe! Group name"/></td></tr>
				<tr><td></td></tr>
				
				<tr><td><strong>Description: </strong><span id="groupDescriptionField"><c:out value="${groupManager.group.description}"/></span>
															<a id="editDescriptionButton" style="font-size: 0.6em;" href="javascript:editGroupDescription()" title="Edit GroupMe! Group description">edit</a>
															<input id="groupSaveDescriptionButton" type="button" style="display:none; width:4em;" value="save" onclick="saveNewGroupDescription(<c:out value="${groupManager.group.id}"/>)" title="Save new GroupMe! Group description"/></td></tr>
			</table>
	
			<div id="tagcloud" style="margin-top:1.3em;margin-bottom:1.3em;"> 
				<strong>Tag Cloud:</strong><c:out value="${tagcloud.html}" escapeXml="false"></c:out>
			</div>
			
			<div id="rightButtons" style="display:inline;">
				<a id="exportRDF" href="<%= request.getContextPath() + "/api/" + VIEW_VOCABULARY.ACTION_EXPORT + "?" + ExportController.PARAMETER_GROUP_ID + "=" %>${groupManager.groupID}<%= "&" + ExportController.PARAMETER_MODE + "=" + ExportController.PARAMETER_MODE_GROUPS +"&" + ExportController.PARAMETER_EXPORT_FORMAT + "=rdf" %>" target="GroupMe! RDF-Export" title="Export GroupMe! Group to RDF">
					<img src="<%= request.getContextPath() %>/images/rdf-48x48.gif" height="24px" width="24px" style="text-decoration:none;border:none;"/>
				</a>
				<a id="exportRSS" href="<%= request.getContextPath() + "/api/" + VIEW_VOCABULARY.ACTION_EXPORT + "?" + ExportController.PARAMETER_GROUP_ID +  "=" %>${groupManager.groupID}<%= "&" + ExportController.PARAMETER_MODE + "=" + ExportController.PARAMETER_MODE_GROUPS +"&" + ExportController.PARAMETER_EXPORT_FORMAT + "=rss" %>" target="GroupMe! RSS-Export" title="Export GroupMe! Group to RSS">
					<img src="<%= request.getContextPath() %>/images/rss-48x48.gif" height="24px" width="24px" style="text-decoration:none;border:none;"/>
				</a>
			</div>
			<c:if test="${userManager.loggedIn}">
				<div id="leftButtons" style="display:inline;">
					<a id="addTagButton" href="javascript:addTagToGroup()" target="" title="Add tag to actual GroupMe! Group">
						<img src="<%= request.getContextPath() %>/images/tag_blue_add.gif" height="24px" width="24px" style="text-decoration:none;border:none;"/>
					</a>
					<a id="addThumbnailButton" href="javascript:addThumbnailToGroup()" target="" title="Add Thumbnail to actual GroupMe! Group">
						<img src="<%= request.getContextPath() %>/images/thumbnail.gif" height="24px" width="24px" style="text-decoration:none;border:none;"/>
					</a>
				</div>		
			</c:if>
			
			<div id="groupMenu">
						<strong>tags:</strong>
					<span id="groupTags">-</span>  
			</div>
			<div id="group" style="clear:right; top:0px; left:0px; width:99%; height:500px; border:dashed gray 1px; position:relative;">
			</div>
			<script type="text/javascript"> 
				Droppables.add('group', {onDrop:itemDropped});
			</script>
			
		</div>
	</div>
	<div id="bigResourceScreen" style="z-index:50000; position:fixed; text-align:center; vertical-align:middle; left:0px; top:0px; width:100px; height:60px; background-color:black; display:none;">
	</div>
	<div id="bigResource" style="z-index:50001; position:fixed; left:0px; top:0px; text-align:center; vertical-align:middle; width:100%; display:none;">
	</div>
	<div id="footer">
		<%@ include file="./jsp-includes/footer.jsp" %>
	</div>
</body>
</html>